<template>
  <van-tabs v-model="val" @change="onChange">
    <van-tab title="标签 1">内容 1</van-tab>
    <van-tab title="标签 2">内容 2</van-tab>
    <van-tab title="标签 3">内容 3</van-tab>
    <van-tab title="标签 4">内容 4</van-tab>
  </van-tabs>
</template>

<script>
// v-model:active
export default {
  props: ['active'],
  data() {
    return {
      val: 0,
    }
  },
  watch: {
    val(v) {
      console.log(v, 'v')
    },
  },
  methods: {
    onChange(v) {
      // 子组件控制val,把结果通报给父组件，让父组件去更改他自己的active()
      console.log('onChange:', v)
      this.$emit('onChange', v)
    },
  },
}
</script>

<style></style>
